<template>
  <div class="about-container">
    <el-card class="about-card">
      <template #header>
        <div class="about-header">
          <h2>关于 MACC</h2>
        </div>
      </template>
      
      <div class="about-content">
        <div class="app-info">
          <h3>应用信息</h3>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="应用名称">MACC</el-descriptions-item>
            <el-descriptions-item label="版本">1.0.0</el-descriptions-item>
            <el-descriptions-item label="技术栈">Vue 3 + Element Plus + Electron</el-descriptions-item>
            <el-descriptions-item label="开发语言">JavaScript + SCSS</el-descriptions-item>
          </el-descriptions>
        </div>
        
        <div class="features">
          <h3>主要功能</h3>
          <ul>
            <li>本地应用管理</li>
            <li>日志系统管理</li>
            <li>暗黑模式支持</li>
            <li>响应式界面设计</li>
          </ul>
        </div>
        
        <div class="contact">
          <h3>联系信息</h3>
          <p>如有问题或建议，请联系开发团队。</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
// 关于页面组件
</script>

<style scoped lang="scss">
.about-container {
  padding: 20px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.about-card {
  width: 100%;
  max-width: 800px;
  
  .about-header {
    text-align: center;
    
    h2 {
      margin: 0;
      color: #409eff;
    }
  }
  
  .about-content {
    .app-info,
    .features,
    .contact {
      margin-bottom: 30px;
      
      h3 {
        color: #303133;
        margin-bottom: 15px;
        border-bottom: 2px solid #409eff;
        padding-bottom: 5px;
      }
      
      ul {
        list-style-type: none;
        padding: 0;
        
        li {
          padding: 8px 0;
          border-bottom: 1px solid #f0f0f0;
          
          &:before {
            content: "✓";
            color: #67c23a;
            font-weight: bold;
            margin-right: 10px;
          }
          
          &:last-child {
            border-bottom: none;
          }
        }
      }
      
      p {
        line-height: 1.6;
        color: #606266;
      }
    }
  }
}

// 暗黑模式样式
:deep(.dark) {
  .about-content {
    .app-info,
    .features,
    .contact {
      h3 {
        color: #e4e7ed;
      }
      
      p {
        color: #c0c4cc;
      }
    }
  }
}
</style>